<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      :visible="isVisible"
      @close="closeDialog"
      class="dialog"
    >

      <div class="articalPerview">
        <h2>{{previewData.title}}</h2>
        <div class="artMessgae">
          <span>{{previewData.createTime | formatrightTime('YYYY-MM-DD HH:mm:ss')}}</span>
          <span>{{previewData.creatorID | formmatcreatorID}}</span>
          <i class="el-icon-view" />
          <span>{{previewData.visits}}</span>
        </div>
        <div class="content" v-html="previewData.articleBody">{{previewData.articleBody}}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArticlesPreviews',
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Object,
      required: true
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:isVisible', false)
    }
  }

}
</script>

<style scoped lang='scss'>
 .dialog{
     ::v-deep {
       .el-dialog {
        width: 800px;
      }
   }
 }
  .articalPerview{
    width: 760px;
    font-size: 14px;
     .artMessgae{
        span{
          display: inline-block;
          margin: 0px 10px 10px;
        }
     }

     .content{
        background: #f5f5f5;
        padding: 10px;
        border-top: 1px dashed grey;
     }

  }

</style>
